<template>
  <div class="vote-rank">
    <div class="header" style="display:block;height:3.76rem;width:100%;backgroundSize:100%;position: relative" :style="{backgroundImage: 'url(' +detail.voteCoverUrl+ ')'}">
      <div class="title">{{detail.voteTitle}}</div>
    </div>
    <div class="rank-list">
      <ul v-if="detail.voteOptionList.length">
        <li class="flex-box-align" v-for="(item, index) in detail.voteOptionList" :key="index">
          <img src="../../images/one.png" alt="" v-if="index == 0">
          <img src="../../images/two.png" alt="" v-else-if="index == 1">
          <img src="../../images/three.png" alt="" v-else-if="index == 2">
          <span v-else class="rank">{{index+1}}</span>
          <span class="flex">{{item.optionContent}}</span>
          <span>票数：<span style="color: #E52121">{{item.turnout}}</span></span>
        </li>
        <!--<li class="flex-box-align">-->
          <!--<img src="../../images/two.png" alt="">-->
          <!--<span class="flex">海天花园</span>-->
          <!--<span>票数：<span style="color: #E52121">52</span></span>-->
        <!--</li>-->
        <!--<li class="flex-box-align">-->
          <!--<img src="../../images/three.png" alt="">-->
          <!--<span class="flex">海天花园</span>-->
          <!--<span>票数：<span style="color: #E52121">52</span></span>-->
        <!--</li>-->
      </ul>
      <div v-else style="text-align: center">暂无排名</div>

    </div>
    <ul class="detail-nav-list flex-cont">
      <li :class="{active: active == 'all'}" @click="linkToDetail">全部选项</li>
      <li :class="{active: active == 'rank'}" @click="$router.replace({path:'voteRank',query: {id: id}})">当前排名</li>
      <li :class="{active: active == 'brief'}" @click="$router.replace({path:'voteBrief',query: {id: id}})">活动介绍</li>
    </ul>
  </div>
</template>

<script>
  import { Search } from 'vux'
  import {parseUrlParams} from "../../util";
  let CONSTANT = require('../../../wechat/static/constant/constant.js'),
    common = require("../../../wechat/static/common/common.js"),
    wsService = require("../../../wechat/static/common/wechat-jsdk.js");

  export default {
    components: {
      Search
    },
    data () {
      return {
        id: "",
        url: "https://img-test.wemeshops.com/3dbd10d0-2ef3-4e7a-ba97-dfcdaf2799f3.png",
        results: [],
        value: "",
        detail: {
          url: "https://img-test.wemeshops.com/3dbd10d0-2ef3-4e7a-ba97-dfcdaf2799f3.png",
        },
        active: "rank",
      }
    },
    mounted(){
      this.id = parseUrlParams("id")
      this.getDetail()
    },
    methods:{
      getDetail() {
        common.requestAjax(CONSTANT.URL.VOTE.VOTEDETAIL, {}, {voteId: parseUrlParams("id")}, (res) => {
          if (res.status == 200) {
            this.detail = res.data.bussData
            this.detail.voteOptionList = this.getRankList(this.detail.voteOptionList)
          }
        })
      },
      getRankList(arr) {
        let newArr = [];
        for(var i = 0; i < arr.length; i++){
          for (var j = i + 1; j < arr.length; j++){
            var p;
            if (arr[i].turnout < arr[j].turnout)
            {
              p = arr[i].turnout;
              arr[i].turnout = arr[j].turnout;
              arr[j].turnout = p;
            }
          }
        }
        newArr = arr;
        return newArr
      },
      handleGet() {
        common.requestAjax(CONSTANT.URL.OPTION.VOTEOPTION, {}, {voteId: parseUrlParams("id")}, (res) => {
          if (res.status == 200) {

            this.$vux.alert.show({
              title: "提示",
              content: res.msg,
              onShow () {

              },
              onHide () {
              }
            })
          }
        })
      },
      handleClickVote(voteId, optionId, index) {
        common.requestAjax(CONSTANT.URL.VOTEOPTION.VOTE, {}, {voteId: voteId, optionId: optionId}, (res) => {
          if (res.status == 200) {
            this.detail.voteOptionList[index].isVoted = "y"
            this.$vux.alert.show({
              title: "提示",
              content: res.msg,
              onShow () {

              },
              onHide () {
              }
            })
          }
        })
      },
      handleClickNav(val) {
        this.active = val
      },
      linkToDetail() {
        if (this.detail.voteOptionType == "1") {
          this.$router.replace({path: '/voteDetailEasy',query: {id: this.id}})
        } else if(this.detail.voteOptionType == "2") {
          this.$router.replace({path: '/voteDetail',query: {id: this.id}})
        }
      },
      resultClick (item) {
//        this.$router.push({path: "/inquiry/detail", query: {id: item.id}})
      },
      getResult (val) {
        console.log('on-change', val)
        this.results = val ? this.getResult1(this.value) : []
      },
      getResult1(val) {
        let rs = []
        for (let i = 0; i < this.dataList.length; i++) {
          if (this.dataList[i].patientUserCoreDTO.trueName.indexOf(val) != -1) {
            rs.push({
              title: this.dataList[i].patientUserCoreDTO.trueName,
              id: this.dataList[i].id,
            })
          }
        }
        return rs
      },
      onSubmit () {
        this.$refs.search.setBlur()
        this.$vux.toast.show({
          type: 'text',
          position: 'top',
          text: 'on submit'
        })
      },
      onFocus () {
        console.log('on focus')
      },
      onCancel () {
        console.log('on cancel')
      },
    },
  }
</script>

<style lang="scss">
  .vote-rank {
    height: 100%;
    background-color: #f2f2f2;
    font-size: .32rem;
    .header {
      .title {
        width: 100%;
        position: absolute;
        bottom: 0;
        left: 0;
        line-height: .6rem;
        height: .6rem;
        text-align: center;
        font-size: .34rem;
        color: #fff;
        background: rgba(0, 0, 0, 0.4);
      }
    }
    .rank-list {
      padding: .25rem;
      ul {
        background-color: #fff;
        padding: .28rem .32rem;
        margin-bottom: .98rem;
        li {
          margin-bottom: .2rem;
          &:last-child {
            margin-bottom: 0;
          }
          img {
            width: .6rem;
            height: .66rem;
            vertical-align: middle;
            margin-right: .43rem;
          }
          .rank {
            width: .6rem;
            height: .66rem;
            line-height: .66rem;
            text-align: center;
            margin-right: .43rem;
          }
        }
      }
    }
    .detail-nav-list {
      position: fixed;
      bottom: 0;
      left: 0;
      width: 100%;
      &:after {
        content:"";
        position: absolute;
        width: 100%;
        height: 1px;
        background-color: #d1d1d1;
        left: 0;
        right: 0;
        top: 0;
        transform: scaleY(.5);
      }
      li {
        height: .98rem;
        line-height: .98rem;
        text-align: center;
        flex: 1;
        -webkit-flex: 1;
        color: #fff;
        background-color: #000;
        position: relative;
        &:after {
          content: "";
          position: absolute;
          width: 1px;
          height: 100%;
          background-color: #fff;
          right: 0;
          bottom: 0;
          top: 0;
          transform: scaleX(.5);
        }
        &:active {
          opacity: .6;
        }
      }
      li.active {
        color: #198AE7;
        background-color: #fff;
      }
    }
  }
</style>
